<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>vue入门案例</title>
    <!-- 引入vue.js资源-->
    <script type="application/javascript" src="./node_modules/vue/dist/vue.js"></script>
</head>
<!-- vue不能够直接作用在body元素上-->
<body>
        <!--
           双向绑定: 我们通过v-model和language进行绑定,同时通过{{language}}在页面输出
          我们可以发现输入框的变化引起啦data中的language变化,同时页面输出也会跟着变化.
           input与language绑定,input的value值变化,影响到啦data中的language值.
           页面{{language}}与数据language绑定,因此language值变化,引起啦页面效果变化.
        -->
        <!-- div指定vue的作用范围
             多个CheckBox对应一个model时,model的类型是一个数组,单个checkbox值是boolean类型.
         -->
        <div id="app">
            <input type="checkbox" v-model="language" value="Java" />Java<br/>
            <input type="checkbox" v-model="language" value="PHP" />PHP<br/>
            <input type="checkbox" v-model="language" value="Python" />Python<br/>
            请勾选的学科是：{{language}}
        </div>

</body>
<script>
    /*每个vue应用都是通过Vue函数创建一个新的VUE实例开始的.*/
    new Vue({
        el:"#app",//每个Vue实例都需要关联一段HTml模板,Vue会基于此模板进行视图渲染.我们可以通过el属性来指定.
        data:{//当Vue实例被创建时,它会尝试获取在data中定义的所有属性,用于视图的渲染.并且"监视"data中的属性变化,
            language:[]
        }
    })

</script>
</html>